<?php
/**
 * 移动端侧边栏修复测试
 * 专门测试移动端侧边栏点击功能
 */
?>
<!DOCTYPE html>
<html lang='zh-CN'>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>移动端侧边栏修复测试</title>
    <link href='https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css' rel='stylesheet'>
    <link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css' rel='stylesheet'>
    <link href='admin/assets/admin.css' rel='stylesheet'>
    <style>
        body { 
            padding: 20px; 
            background: #f8f9fa;
        }
        .test-container {
            max-width: 1200px;
            margin: 0 auto;
        }
        .test-section {
            background: white;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .test-result {
            padding: 10px;
            border-radius: 4px;
            margin: 10px 0;
        }
        .success { background: #d4edda; color: #155724; }
        .error { background: #f8d7da; color: #721c24; }
        .warning { background: #fff3cd; color: #856404; }
        .info { background: #d1ecf1; color: #0c5460; }
        
        /* 强制移动端样式 */
        .force-mobile {
            max-width: 375px;
            margin: 0 auto;
            border: 1px solid #ccc;
            min-height: 667px;
            position: relative;
            background: white;
        }
        
        .force-mobile .sidebar {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
        }
        
        .force-mobile .main-content {
            margin-left: 0;
            height: 100%;
            overflow-y: auto;
        }
    </style>
</head>
<body>
    <div class='test-container'>
        <h1 class='text-center mb-4'>📱 移动端侧边栏修复测试</h1>
        
        <div class='test-section'>
            <h3>修复说明</h3>
            <p>已修复移动端侧边栏链接无法点击的问题：</p>
            <ul>
                <li><strong>CSS修复</strong>：添加了 <code>pointer-events: none</code> 和 <code>pointer-events: auto</code></li>
                <li><strong>移动端行为</strong>：侧边栏隐藏时禁用点击，显示时启用点击</li>
                <li><strong>链接状态</strong>：确保链接在显示状态下可以正常点击</li>
            </ul>
        </div>

        <div class='test-section'>
            <h3>修复详情</h3>
            
            <div class='test-result success'>
                <strong>✓ CSS修复完成</strong>
                <p>在移动端媒体查询中添加了：</p>
                <pre><code>.sidebar {
    transform: translateX(-100%);
    z-index: 1050;
    pointer-events: none;  /* 隐藏时禁用点击 */
}

.sidebar.show {
    transform: translateX(0);
    pointer-events: auto;  /* 显示时启用点击 */
}

.sidebar.show .nav-link {
    pointer-events: auto;  /* 确保链接可以点击 */
}</code></pre>
            </div>
            
            <div class='test-result info'>
                <strong>ℹ 测试方法</strong>
                <p>请在手机或浏览器开发者工具的移动端模式下测试：</p>
                <ol>
                    <li>点击顶部导航栏的汉堡菜单按钮</li>
                    <li>侧边栏应该从左侧滑出</li>
                    <li>点击侧边栏中的任意链接</li>
                    <li>链接应该正常跳转</li>
                    <li>点击主内容区或遮罩层应该关闭侧边栏</li>
                </ol>
            </div>
        </div>

        <div class='test-section'>
            <h3>模拟移动端测试</h3>
            <p>以下是一个模拟iPhone 12尺寸的测试区域：</p>
            
            <div class='force-mobile'>
                <!-- 顶部导航栏 -->
                <div class='top-navbar' style='display: flex; justify-content: space-between; align-items: center;'>
                    <button class='sidebar-toggle'>
                        <i class='fas fa-bars'></i>
                    </button>
                    <span>后台管理系统</span>
                    <div style='width: 40px;'></div>
                </div>
                
                <!-- 侧边栏 -->
                <div class='sidebar'>
                    <div class='sidebar-header'>
                        <h4>管理后台</h4>
                        <p>CDK支付系统</p>
                    </div>
                    <nav class='nav flex-column'>
                        <a class='nav-link active' href='#'>
                            <i class='fas fa-home'></i>
                            <span>首页</span>
                        </a>
                        <a class='nav-link' href='#'>
                            <i class='fas fa-shopping-cart'></i>
                            <span>商品管理</span>
                        </a>
                        <a class='nav-link' href='#'>
                            <i class='fas fa-file-invoice'></i>
                            <span>订单管理</span>
                        </a>
                        <a class='nav-link' href='#'>
                            <i class='fas fa-gift'></i>
                            <span>CDK管理</span>
                        </a>
                        <a class='nav-link' href='#'>
                            <i class='fas fa-credit-card'></i>
                            <span>支付管理</span>
                        </a>
                        <a class='nav-link' href='#'>
                            <i class='fas fa-cog'></i>
                            <span>系统设置</span>
                        </a>
                    </nav>
                </div>
                
                <!-- 主内容区 -->
                <div class='main-content'>
                    <h4>移动端测试页面</h4>
                    <p>点击顶部导航栏的汉堡菜单按钮测试侧边栏功能。</p>
                    <p>侧边栏显示后，点击任意链接测试跳转功能。</p>
                    
                    <div class='alert alert-info'>
                        <strong>测试结果：</strong>
                        <div id='test-result'>等待测试...</div>
                    </div>
                </div>
            </div>
        </div>

        <div class='test-section'>
            <h3>实际测试入口</h3>
            <p>请在真实环境中测试修复效果：</p>
            
            <div class='row mt-3'>
                <div class='col-md-6'>
                    <div class='card text-center'>
                        <div class='card-body'>
                            <i class='fas fa-mobile-alt fa-3x text-primary mb-3'></i>
                            <h5>移动端测试</h5>
                            <p>使用手机访问后台管理</p>
                            <a href='http://localhost:8000/admin/login.php' class='btn btn-primary' target='_blank'>
                                <i class='fas fa-external-link-alt me-2'></i>手机测试
                            </a>
                        </div>
                    </div>
                </div>
                <div class='col-md-6'>
                    <div class='card text-center'>
                        <div class='card-body'>
                            <i class='fas fa-desktop fa-3x text-success mb-3'></i>
                            <h5>开发者工具</h5>
                            <p>使用浏览器开发者工具模拟移动端</p>
                            <button class='btn btn-success' onclick='openDevTools()'>
                                <i class='fas fa-tools me-2'></i>打开开发者工具
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src='admin/assets/admin.js'></script>
    <script>
        // 初始化侧边栏
        document.addEventListener('DOMContentLoaded', function() {
            const adminUI = new AdminUI();
            window.adminUI = adminUI;
            
            // 添加测试事件监听
            const navLinks = document.querySelectorAll('.nav-link');
            navLinks.forEach(function(link) {
                link.addEventListener('click', function(e) {
                    e.preventDefault();
                    const resultDiv = document.getElementById('test-result');
                    const linkText = this.querySelector('span').textContent;
                    resultDiv.innerHTML = '<span class="text-success">✓ 链接点击成功：' + linkText + '</span>';
                    
                    // 如果是移动端，点击链接后自动关闭侧边栏
                    if (window.innerWidth <= 768) {
                        setTimeout(function() {
                            adminUI.hideSidebar();
                        }, 500);
                    }
                });
            });
            
            // 更新测试结果
            const testResult = document.getElementById('test-result');
            testResult.innerHTML = '<span class="text-info">ℹ 点击侧边栏链接测试功能</span>';
        });
        
        function openDevTools() {
            alert('请按F12打开开发者工具，然后切换到移动端模拟模式（通常有手机图标）');
        }
    </script>
</body>
</html>
